<template>
  <div>
    <div :style="backgroundDiv" >
      <div style="margin-top: 20px">.</div>
      <div style="margin-top: 200px ;" >
        <div class="myform">
          <mt-field label="用户名" placeholder="请输入用户名" v-model="registerForm.username"></mt-field>
          <mt-field label="邮箱" placeholder="请输入邮箱"  type="email" v-model="registerForm.email"></mt-field>
          <mt-field label="密码" placeholder="请输入密码" type="password" v-model="registerForm.password"></mt-field>
        </div>

    </div>
  </div>
    <div class="mybtn"><mt-button  type="primary" size="large" v-on:click="register">注册</mt-button></div>
    <div class="myback"><mt-button icon="back" style="float: left" v-on:click="back">back</mt-button></div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';

    export default {
        name: "register",
      data(){
          return{
            registerForm:{
              username:'',
              email:'',
              password:'',
            },
            backgroundDiv: {
              backgroundImage:'url(' + require('../assets/register.jpg') + ')',
              backgroundRepeat:'no-repeat',
              backgroundSize:'100% 70%'
            },
          }
      },
      methods:{
        back(){
          this.$router.go(-1);//返回上一层
        },
        register(){
            if(!this.registerForm.email){
              Toast('输入不能为空')
              return false
            }else if(!this.registerForm.password){
              Toast('输入不能为空')
              return false
            }else if(!this.registerForm.username){
              Toast('输入不能为空')
              return false
            }
            else{
              this.$axios.post('/register',this.registerForm)
                .then(res => {
                  if (res.data.code === 200) {
                    if(res.data.data != null) {
                      this.$store.commit('SET_TOKEN', true)
                      this.$store.commit('GET_USERNAME', res.data.data.username)
                      this.$store.commit('SET_ID', res.data.data.id)
                      this.$store.commit('SET_EMAIL',res.data.data.email)
                      Toast("注册成功")
                      this.$router.push({'path': '/home'})
                    }else{
                      Toast("注册失败")
                    }
                  }else {
                    Toast("注册失败")
                  }
                })
            }
          },
        }
    }
</script>

<style scoped>
  .mybtn{
    margin: 20px;
  }
  .myform{
    margin-top: 300px;
  }
  .myback{
    margin-bottom: 5px;
  }
</style>
